<template>
	<view class="columnbox wdh-100 content">
		<view class="info-box wdh-100 columnbox">
			<view class="rowbox wdh-100 spb">
				<view style="font-size: 32rpx;font-weight: bold;">发布单品快卖</view>
				<view class="rowbox small-btn" @click="chooseTem">选择推荐方案</view>
			</view>
			<view class="columnbox wdh-100 desc-box">
				<view class="wdh-100 desc-title">已为您自定生成一个方案</view>
				<view class="rowbox wdh-100 one-info spb">
					<view>快卖商品</view>
					<input @blur="getWenAn" v-model="name" placeholder-class="noinfo" placeholder="点击输入" />
				</view>
				<view class="rowbox wdh-100 one-info spb">
					<view>商品原价</view>
					<input v-model="original" type="digit" placeholder-class="noinfo" placeholder="点击输入" />
				</view>
				<view class="rowbox wdh-100 one-info spb">
					<view>快卖价格</view>
					<input v-model="price" type="digit" placeholder-class="noinfo" placeholder="点击输入" />
				</view>
				<view class="rowbox wdh-100 one-info spb">
					<view>结束日期</view>
					<view class="rowbox">
						发布后
						<input style="width: 200rpx;margin-right: 10rpx;" v-model="day" type="number"
							placeholder-class="noinfo" placeholder="点击输入" />
						天
					</view>
				</view>
				<view class="rowbox wdh-100 one-info spb biaoti">
					<view>快卖标题</view>
					<!-- <input v-model="title" placeholder-class="noinfo" placeholder="点击输入" /> -->
					<textarea v-model="title" placeholder="请输入产品标题" />
				</view>
			</view>
		</view>
		<view class="info-box wdh-100 columnbox">
			<view class="rowbox wdh-100 spb">
				<view style="font-size: 32rpx;font-weight: bold;">产品详情</view>
				<view @click="getWenAn" class="rowbox small-btn">换个文案</view>
			</view>
			<view class="info-box wdh-100 columnbox">
				<textarea v-model="copywriting" placeholder="请输入产品详情" class="content-box"></textarea>
				<view class="rowbox img-box" v-for="(item,index) in images" :key='index'>
					<image :src="item" mode="aspectFill">
					</image>
					<view class="rowbox delet-box" @click="deletImg(index)">
						<u-icon size="70rpx" name="close-circle-fill"></u-icon>
					</view>
				</view>
				<view class="rowbox img-box" v-for="(item,index) in uploadImg" :key='index'>
					<image :src="item" mode="aspectFill">
					</image>
					<view class="rowbox delet-box" @click="deletUploadImgImg(index)">
						<u-icon size="70rpx" name="close-circle-fill"></u-icon>
					</view>
				</view>

				<view class="rowbox add-btn" @click="addImg">+添加新图片</view>
				<view class="wdh-100" style="height: 200rpx;"></view>
			</view>
		</view>

		<!-- <view class="img-list wdh-100">
        	<view class="tit">
        		商品图片
        	</view>
        	<u-upload max-count="1" ref="upload" @afterRead="afterRead" @delete="deletePic" name="1"
        		:deletable="true" :previewImage="true" :file-list="fileList1"></u-upload>
        </view> -->



		<view class="bottom-box wdh-100 rowbox">
			<view @click="handleSubmit" class="one-btn rowbox def-bgcol">确认发布</view>
		</view>
		<IosKefu :show="showIosKefu" :type="matype" @close="closeIosKefu"></IosKefu>
		<AndrTaocan :show="showAndrTaocan" :taocanid="5" @close="closeAndrTaocan" @refsh="handlerefsh"></AndrTaocan>
		<u-popup mode="center" @close="temflag=false,curtem=0" :show="temflag" round="20rpx">
			<view class="columnbox tem-box">
				<view class="rowbox tem-title">单品快卖推荐方案</view>
				<scroll-view scroll-y class="wdh-100" style="height: 40vh;">
					<view @click="curtem=index" class="rowbox spb one-type" v-for="(item,index) in temList"
						:key='index'>
						{{item.name}}
						<image v-if="curtem==index" class="tem-icon" src="/static/img/sel.png" mode="widthFix"></image>
						<image v-else class="tem-icon" src="/static/img/unsel.png" mode="widthFix"></image>
					</view>
				</scroll-view>
				<view class="rowbox wdh-100 tem-btn">
					<view class="rowbox" @click="temflag=false,curtem=0">取消</view>
					<view class="rowbox" @click="userTem">使用此方案</view>
				</view>
			</view>
		</u-popup>
		<u-modal :show="showmodal" showCancelButton="true" title="提示" content='是否立即分享此商品' @cancel="closemodal"
			@confirm="confirmmodal"></u-modal>
	</view>
</template>

<script>
	import IosKefu from '@/components/ioskefu.vue'
	import AndrTaocan from '@/components/andrtaocan.vue'
	export default {
		components: {
			IosKefu,
			AndrTaocan
		},
		data() {
			return {
				showAndrTaocan: false,
				showIosKefu: false,
				matype: '',
				userinfo: null,
				name: "",
				title: '',
				fileList1: [],
				id: 0,
				price: '',
				copywriting: '',
				images: [],
				uploadImg: [],
				submitflag: false,
				original: '',
				temList: [],
				temflag: false,
				curtem: 0,
				day: '',
				showmodal: false,
				danpin_goodId: ''
			}
		},
		onShow() {
			if (uni.getStorageSync('uid')) {
				this.userinfo = uni.getStorageSync('userInfo')
			}
		},
		onLoad(options) {

			if (options.id) {
				this.id = parseInt(options.id)
				this.getGoodsDetail()
			}
			if (options.itemInfo) {
				console.log('options', JSON.parse(options.itemInfo));
				let itemInfo = JSON.parse(options.itemInfo);
				this.name = itemInfo.label;
				this.images = itemInfo.images.split(',')
				this.title = itemInfo.title;
				this.copywriting = unescape(itemInfo.content.replace(/\\/g, "%"));
				this.day = '3';
			}
		},
		methods: {
			userTem() {
				this.temflag = false
				this.name = this.temList[this.curtem].name
				this.original = this.temList[this.curtem].original
				this.price = this.temList[this.curtem].price
				this.day = this.temList[this.curtem].day
				this.title = this.temList[this.curtem].title
				if (this.name != '') {
					this.getWenAn()
				}
			},
			//选择方案
			chooseTem() {
				this.$req.post('/shanghu/shuiguotj').then(res => {
					this.temList = res.data.data
					this.temflag = true
				})
			},
			deletUploadImgImg(index) {
				this.uploadImg.splice(index, 1)
			},
			deletImg(index) {
				this.images.splice(index, 1)
			},
			addImg() {
				uni.chooseImage({
					success: (res) => {
						this.uploadImg = this.uploadImg.concat(res.tempFilePaths)
					}
				})
			},
			getWenAn() {
				if (this.name == '') {
					uni.showToast({
						title: '请输入快卖商品',
						icon: 'none'
					})
				} else {
					this.$req.post('/shanghu/copywritingscreen', {
						name: this.name
					}).then(res => {
						// this.title = res.data.data.kuaimai
						this.uploadImg = []
						this.copywriting = res.data.data.data.content

						this.images = res.data.data.data.images.split(',')
					})
				}
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			closeIosKefu() {
				this.showIosKefu = false
			},
			handlerefsh() {
				this.handleSubmit()
			},
			closeAndrTaocan() {
				this.showAndrTaocan = false
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event)
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			//上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {

					let a = uni.uploadFile({
						url: 'https://dscc.suishilian.com/admin/uploadFile', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let data = JSON.parse(res.data) //最终传给的是字符串，这里需要转换格式
							resolve(data.data)
						}
					});
				})
			},


			getGoodsDetail() {
				this.$req.post('/shanghu/danpininfo', {
					id: this.id
				}).then(res => {
					let info = res.data.data
					this.name = info.name
					this.price = info.price
					this.title = info.title
					this.day = info.day
					this.original = info.original
					this.images = info.image.split(',')
					this.copywriting = unescape(info.content.replace(/\\/g, "%"));
				})
			},
			handleSubmit() {
				if (!this.name) {
					uni.showToast({
						title: '请输入快卖商品',
						icon: 'none'
					})
					return
				}
				if (!this.original) {
					uni.showToast({
						title: '请输入商品原价',
						icon: 'none'
					})
					return
				}
				if (!this.price) {
					uni.showToast({
						title: '请输入快卖价格',
						icon: 'none'
					})
					return
				}
				if (!this.title) {
					uni.showToast({
						title: '请输入快卖标题',
						icon: 'none'
					})
					return
				}
				if (!this.copywriting) {
					uni.showToast({
						title: '请输入产品详情',
						icon: 'none'
					})
					return
				}
				if (this.images.length == 0 && this.uploadImg.length == 0) {
					uni.showToast({
						title: '请上传图片',
						icon: 'none'
					})
					return
				}
				if (!this.submitflag) {
					this.submitflag = true
					let userInfo = uni.getStorageSync('userInfo')
					if (userInfo.shanghuid == 0) {
						this.submitflag = false
						uni.navigateTo({
							url: '/pages/iden/iden'
						})
					} else {
						this.$req.post('/shanghu/shanghuuserInfo', {
							uid: uni.getStorageSync('uid')
						}).then((res) => {
							let data = res.data.data
							if (data.dpkm === 1 && data.dpkminttime === 0) {
								this.submitflag = false
								if (wx.getSystemInfoSync().system.indexOf('Android') > -1) {
									this.showAndrTaocan = true
								} else {
									this.matype = 'dpkmimg'
									this.showIosKefu = true
								}
							} else if (data.dpkm === 1 && data.dpkminttime > 0) {
								this.submitflag = false
								if (wx.getSystemInfoSync().system.indexOf('Android') > -1) {
									this.showAndrTaocan = true
								} else {
									this.matype = 'dpkmimg'
									this.showIosKefu = true
								}
							} else {
								this.sendInfo()
							}
						})
					}
				}
			},
			async sendInfo() {
				uni.showLoading({
					title: '提交中'
				})
				let list = []
				for (var i = 0; i < this.uploadImg.length; i++) {
					let img = await this.sendImg(this.uploadImg[i])
					list.push(img)
				}
				let req = {
					original: Number(this.original),
					name: this.name,
					title: this.title,
					price: Number(this.price),
					image: this.images + list,
					content: this.copywriting,
					shanghuid: this.userinfo.shanghuid || '',
					day: Number(this.day)
				}

				let url = ''
				if (this.id) {
					url = '/shanghu/danpinupdate'
					req.id = this.id
					delete req.shanghuid
				} else {
					url = '/shanghu/danpinadd'
				}
				this.$req.post(url, req).then((res) => {
					this.submitflag = false
					uni.hideLoading()
					let data = res.data
					this.danpin_goodId = res.data.data;
					if (data.code === 0) {
						uni.showToast({
							mask: true,
							title: '保存成功',
							duration: 500,

						})

						// 2024-05-21  hdd新增修改  保存后 显示时候立即分享按钮，如立即分享，则跳转C端小程序单品快卖商品详情
						if (url == '/shanghu/danpinadd') {
							this.showmodal = true
						} else {

						}
						// setTimeout(() => {
						//     uni.navigateBack()
						// }, 500)
					} else {
						uni.showToast({
							mask: true,
							icon: 'none',
							title: data.msg
						})
					}
				})
			},
			sendImg(url) {
				return new Promise(resolve => {
					this.$req.uploadImg(url).then(res => {
						console.log('==', res)
						resolve(res.data.data)
					})
				})
			},
			// 关闭模态框取消按钮点击方法

			closemodal() {
				this.showmodal = false;
				uni.navigateBack()
			},
			confirmmodal() {
				uni.navigateToMiniProgram({
					appId: 'wx42f52aeb0203685a',
					path: `/pages/quicksale/quicksale?id=${this.danpin_goodId}&shanghuid=${this.userinfo.shanghuid}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.beizhu {
		width: 100%;
		font-size: 30rpx;
		text-align: left;
		padding: 30rpx 32rpx 10rpx 32rpx;
		color: #999;
	}

	.img-list {
		padding-top: 32rpx;
		display: flex;

		justify-content: flex-start;

		.tit {
			font-size: 28rpx;
			margin-right: 30rpx;
		}
	}

	.content {
		min-height: 100vh;
		background: #f6f6f6;
		justify-content: flex-start;
		font-family: PingFang SC;
	}

	.info-box {
		padding: 20rpx 20rpx;
		margin-top: 20rpx;
		width: 710rpx;
		border-radius: 10rpx;
		background: #fff;
	}

	.one-info {
		padding: 20rpx 0;
		border-radius: 10rpx;
		font-size: 28rpx;
		line-height: 70rpx;

		input {
			text-align: right;
			width: calc(100% - 200rpx);
			font-size: 28rpx;
		}
	}

	.require-title {
		font-size: 28rpx;
		width: 100%;
		padding: 32rpx 20rpx;
		box-sizing: border-box;
		font-weight: bold;
	}

	.info-line {
		border-bottom: #f1eff3 solid 1px;
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		background: #fff;
		padding: 20rpx 20rpx;
		padding-bottom: 40rpx;
		box-shadow: 0 0 4px 2px #eeecef;
	}

	.one-btn {
		width: 100%;
		font-size: 28rpx;
		height: 90rpx;
		border-radius: 20rpx;
		color: #fff;
	}

	.submit-btn {
		background: #eeecef;
		color: #606266;
	}

	.wenan-btn {
		margin-left: 20rpx;
		border-radius: 10rpx;
		padding: 10rpx 10rpx;
		color: #fff;
		font-size: 24rpx;
		background: #00c664;
		font-size: 24rpx;
		line-height: 40rpx;
	}

	.add-btn {
		width: 100%;
		border: #eeecef solid 1px;
		margin: 20rpx 0;
		border-radius: 10rpx;
		font-size: 28rpx;
		height: 90rpx;
	}

	.content-box {
		background: rgba(#f1eff0, 0.4);
		font-size: 28rpx;
		margin-top: 20rpx;
		border-end-start-radius: 10rpx;
		padding: 20rpx 20rpx;
		width: calc(100% - 40rpx);
	}

	.img-box {
		width: 100%;
		position: relative;
		height: 500rpx;
		margin-top: 20rpx;

		image {
			width: 100%;
			height: 500rpx;
		}

		.delet-box {
			position: absolute;
			top: 0;
			right: 0;
			width: 70rpx;
			height: 70rpx;
			background: rgba(#fff, 0.4);
			border-radius: 100rpx;
		}
	}

	.small-btn {
		font-size: 24rpx;
		color: #00c664;
		border: #00c664 solid 1px;
		line-height: 40rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
	}

	.desc-title {
		font-size: 24rpx;
		color: #606266;
		border-bottom: #e1e1e1 solid 1px;
		padding-bottom: 20rpx
	}

	.desc-box {
		padding: 20rpx 20rpx;
		background: rgba(#f1eff0, 0.4);
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.tem-box {
		width: 700rpx;
	}

	.tem-title {
		padding: 20rpx 0;
		font-size: 28rpx;
		font-weight: bold;
	}

	.one-type {
		width: 90%;
		margin-left: 5%;
		padding: 20rpx 32rpx;
		border: #eeecef solid 1px;
		border-radius: 10rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.tem-icon {
		width: 28rpx;
		height: 28rpx;
	}

	.tem-btn {
		border-top: #f1eff0 solid 1px;
		padding: 20rpx 0;
		font-size: 28rpx;

		view {
			width: 40%;
			border-radius: 10rpx;
			margin: 0 20rpx;
		}
	}

	.tem-btn>view:nth-child(1) {
		height: 70rpx;
		color: #606266;
		border: #e1e1e1 solid 1px;
	}

	.tem-btn>view:nth-child(2) {
		height: 70rpx;
		color: #fff;
		background: #00c664;
	}

	.biaoti {
		align-items: start;
	}

	.biaoti text {
		width: 40%;
	}

	.biaoti textarea {
		width: 60%;
		// height: fit-content;
		height: 150rpx;
	}
</style>
<style>
	.noinfo {
		color: #a7a8aa;
	}
</style>